<template>
	<view class="container">
		<uni-card class="card-detail" is-full>
			健康打卡
		</uni-card>		
		<view class="example">		
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item label="健康状况" name="healthType" required>
					<uni-data-checkbox v-model="formData.healthType" :localdata="type"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="体温" name="temperature" required>
					<uni-easyinput type="number" v-model="formData.temperature" placeholder="请输入体温,例37" />
				</uni-forms-item>
				<uni-forms-item label="风险地区" name="middleHigh" required>
					<uni-data-checkbox v-model="formData.middleHigh" :localdata="high"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="接触确诊" name="diagnosis" required>
					<uni-data-checkbox  v-model="formData.diagnosis" :localdata="nosis"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="境外返回" name="returnInfo" required>
					<uni-data-checkbox  v-model="formData.returnInfo" :localdata="info"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="地址" name="address" required>			
					<pickerAddress @change="change">
						{{value}}
					</pickerAddress>
				</uni-forms-item>
				
			</uni-forms>	
			<view class="action-btn">
			<button @click="submit('handleinput')" class="login-btn cu-btn block bg-blue lg round">确认</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {addHealthclock} from "@/api/health/healthclock"
	import pickerAddress from '@/components/pickerAddress.vue'
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				rules: {
					healthType: {
						rules: [{
							required: true,
							errorMessage: '健康状态不能为空'
						}]
					},
					temperature:{
						rules: [{
							required: true,
							errorMessage: '请填写体温信息',
						}]
					},
					middleHigh: {
						rules: [{
							required: true,
							errorMessage: '风险地区不能为空'
						}]
					},
					diagnosis: {
						rules: [{
							required: true,
							errorMessage: '接触确证不能为空'
						}]
					},
					diagnosis: {
						rules: [{
							required: true,
							errorMessage: '境外返回不能为空'
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '地区不能为空'
						}]
					},
				},
				value: "请选择地区",
				formData: {
				  healthType: 0,
				  temperature: '',
				  middleHigh: 0,
				  diagnosis: 0,
				  returnInfo: 0,
				  address: ''
				},
				loading: false,
				type: [{
					text: '正常',
					value: 0
				}, {
					text: '异常',
					value: 1
				}],
				
				high: [{
					text: '低风险',
					value: 0
				},{
					text: '中风险',
					value: 1
				},{
					text: '高风险',
					value: 2
				}],
				
				nosis:[{
					text: '否',
					value: 0
				},{
					text: '是',
					value: 1
				}],
				
				info: [{
					text: '否',
					value: 0
				},{
					text: '是',
					value: 1
				}]
			}
		},
		
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},

		methods: {
			change(data) {
				this.value = data.data.join('-')
				this.formData.address = this.value
			},

			
			submit(){
				let formData = this.formData;
			    if (formData.temperature && formData.temperature < 35.0 || formData.temperature > 42.0) {
					uni.showToast({
					  title: '体温必须在35℃~42℃之间',
					  icon: 'none',
					  duration: 2000
					});
				return;
			  }
				this.$refs.form.validate().then(res => {
				//console.log(res)
					addHealthclock(this.formData).then(data => {
						console.log(data)
						this.loading = true
						if (data.code === 200) {
							//console.log('1234567')
							uni.showToast({
								title:'打卡成功',
								icon: 'none',
								duration: 2000
							})
							setTimeout(() => {
							  uni.switchTab({
							    url: '/pages/index'
							  })
							}, 3000)
							//跳转页面
							setTimeout(() => {
							  uni.switchTab({
								url: '/pages/index'
							  })
							}, 1000)
						}
										 
										 
					}).catch(() => {
						this.loading = false
						})
				}).catch(err =>{
					console.log('表单错误信息：', err);
			
				})	
							 
			}
			
			
		}
		
		
		
	}
</script>

<style>
		.example {
			padding: 15px;
			background-color: #fff;
		}
       .card-detail{
		   font-size: 30rpx;
		   
		   text-align: center;
	   } 
	

</style>
